<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%; overflow: auto; padding-bottom: 53px"
  >
    <template slot="title">
      <div style="width: 100%">
        <span>{{ title }}</span>
        <span
          style="
            display: inline-block;
            width: calc(100% - 51px);
            padding-right: 10px;
            text-align: right;
          "
        >
          <a-button
            @click="toggleScreen"
            icon="appstore"
            style="height: 20px; width: 20px; border: 0px"
          >
          </a-button>
        </span>
      </div>
    </template>

    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          label="所属设备"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            placeholder="所属设备"
            :disabled="true"
            v-decorator.trim="['devName', validatorRules.notBlank]"
          />
        </a-form-item>
        <a-form-item
          label="所属设备编号"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            placeholder="所属设备编号"
            :disabled="true"
            v-decorator.trim="['devCode', validatorRules.notBlank]"
          />
        </a-form-item>
        <a-form-item
          label="所属设备编码通道"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            placeholder="所属设备编码通道"
            :disabled="true"
            v-decorator.trim="['relationDeviceIndex', validatorRules.notBlank]"
          />
        </a-form-item>
        <a-form-item
          label="摄像机名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            placeholder="摄像机名称"
            v-decorator.trim="['name', validatorRules.notBlank]"
          />
        </a-form-item>
        <a-form-item
          label="摄像机描述"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            placeholder="摄像机描述"
            v-decorator.trim="['cameraDesc', validatorRules.notBlank]"
          />
        </a-form-item>
        <a-form-item
          label="摄像机地点"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-input
            placeholder="摄像机地点"
            v-decorator.trim="['location', validatorRules.notBlank]"
          />
        </a-form-item>
        <a-form-item
          label="是否启用"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
        >
          <a-radio-group v-decorator.trim="['used', validatorRules.notBlank]">
            <a-radio value="1">是</a-radio>
            <a-radio value="0">否</a-radio>
          </a-radio-group>
        </a-form-item>
        <div class="drawer-bootom-button" v-show="!disableSubmit">
          <a-popconfirm
            title="确定放弃编辑？"
            @confirm="handleCancel"
            okText="确定"
            cancelText="取消"
          >
            <a-button style="margin-right: 0.8rem">取消</a-button>
          </a-popconfirm>
          <a-button
            @click="handleSubmit"
            type="primary"
            :loading="confirmLoading"
            >提交</a-button
          >
        </div>
      </a-form>
    </a-spin>
    <h2>参数设置</h2>
    <el-form ref="forms" :model="forms" label-width="auto" :spinning="confirmLoading">
      <!-- <el-form-item label="码流封装" :required="true">
        <el-select
          v-model="forms.package_format.defaultValue"
          prop="package_format"
          placeholder="码流封装"
          clearable
        >
          <el-option
            v-for="item in forms.package_format.groupValue"
            :key="item.value"
            :label="item.name"
            :value="item.key"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item label="视频编码" :required="true" style="padding-left:38px">
        <el-select
          v-model="forms.v_encode.defaultValue"
          prop="v_encode"
          style="width:431px"
          placeholder="视频编码"
        >
          <el-option
            v-for="item in forms.v_encode.groupValue"
            :key="item.value"
            :label="item.name"
            :value="item.key"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="视频宽" :required="true" style="padding-left:38px">
        <el-input v-model="forms.v_width" placeholder="视频宽" prop="v_width" clearable style="width:431px;"></el-input>
      </el-form-item>
      <el-form-item label="视频高" :required="true" style="padding-left:38px">
        <el-input v-model="forms.v_height" placeholder="视频高" prop="v_height" clearable style="width:431px;"></el-input>
      </el-form-item>
      <el-form-item label="视频帧率" :required="true" style="padding-left:38px">
        <el-input
          v-model="forms.v_framerate"
          prop="v_framerate"
          clearable
          placeholder="视频帧率"
          style="width:431px;"
        ></el-input>
      </el-form-item>
      <el-form-item label="视频码率" :required="true" style="padding-left:38px">
        <el-input
          v-model="forms.v_bitrate"
          prop="v_bitrate"
          clearable
          placeholder="视频码率"
          style="width:431px;"
        ></el-input><span style="padding-left:10px">Kbps</span>
      </el-form-item>
      <el-form-item label="音频编码" :required="true" style="padding-left:38px">
        <el-select
          v-model="forms.a_encode.defaultValue"
          placeholder="音频编码"
          style="width:431px"
          prop="a_encode"
        >
          <el-option
            v-for="item in forms.a_encode.groupValue"
            :key="item.key"
            :label="item.name"
            :value="item.range"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="音频采样率" :required="true" style="padding-left:38px">
        <el-input v-model="forms.a_samplerate" placeholder="音频采样率" prop="a_samplerate" clearable style="width:431px;" disabled></el-input><span style="padding-left:10px">KHz</span>
      </el-form-item>
      <!-- <el-form-item label="音频采样率" :required="true">
        <el-select
          v-model="forms.a_samplerate"
          placeholder="音频采样率"
          prop="a_samplerate"
          clearable
        >
        </el-select>
      </el-form-item> -->
	<el-form-item label="音频码率" :required="true" style="padding-left:38px">
        <el-input v-model="forms.a_bitrate" placeholder="音频码率" prop="a_bitrate" disabled clearable style="width:431px;"></el-input><span style="padding-left:10px">Kbps</span>
      </el-form-item>
        <!-- <el-form-item label="码率范围取值" style="margin-left:20px;display: inline-block;">
          <el-input v-model="forms.a_encode.defaultValue" prop="a_encode"  disabled clearable style="width:205px;"></el-input>
        </el-form-item> -->
      <el-form-item label="编码档次" :required="true" style="padding-left:38px">
        <el-select
          v-model="forms.profile.defaultValue.name"
          placeholder="编码档次"
          style="width:431px"
          prop="profile"
        >
          <el-option
            v-for="item in forms.profile.groupValue"
            :key="item.value"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="码率控制" :required="true" style="padding-left:38px">
        <el-select
          v-model="forms.rc_mode.defaultValue.name"
          placeholder="码率控制"
          style="width:431px"
          prop="rc_mode"
        >
          <el-option
            v-for="item in forms.rc_mode.groupValue"
            :key="item.value"
            :label="item.name"
            :value="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="drawer-bootom-button" v-show="!disableSubmit">
      <a-popconfirm
        title="确定放弃编辑？"
        @confirm="handleCancel"
        okText="确定"
        cancelText="取消"
      >
        <a-button style="margin-right: 0.8rem">取消</a-button>
      </a-popconfirm>
      <a-button
        @click="handleSubmits('forms')"
        type="primary"
        :loading="confirmLoading"
        >提交</a-button
      >
    </div>
    <!-- <div class="drawer-bootom-button" v-show="!disableSubmit">
			<a-popconfirm title="确定放弃编辑？" @confirm="handleCancel" okText="确定" cancelText="取消">
				<a-button style="margin-right: .8rem">取消</a-button>
			</a-popconfirm>
			<a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
		</div> -->
  </a-drawer>
</template>

<script>
import pick from "lodash.pick";
import { postAction } from "@/api/manage";
import { devList, cameraEdit, cameraTbdEdit } from "@/api/api";
export default {
  props: ["forms", "cameraId"],
  name: "CameraDetailModal",
  components: {},
  data() {
    return {
      devId: undefined,
      ptzProtocolList: [],
      model: {},
      form: this.$form.createForm(this),
      validatorRules: {
        notBlank: {
          rules: [
            {
              required: true,
              message: "请输入必填项!",
            },
          ],
        },
      },
      // cameraId:'',
      // forms:{
      // 	package_format: '',
      // 	v_encode: '',
      // 	v_framerate: '',
      // 	v_bitrate: '',
      // 	v_width: '',
      // 	v_height: '',
      // 	a_encode: '',
      // 	a_samplerate: '',
      // 	a_bitrate:'',
      // 	profile:'',
      // 	rc_mode:''
      // },
      title: "编辑",
      visible: false,
      modaltoggleFlag: true,
      confirmDirty: false,
      disableSubmit: false,
      labelCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 5,
        },
      },
      wrapperCol: {
        xs: {
          span: 24,
        },
        sm: {
          span: 16,
        },
      },
      modalWidth: 800,
      drawerWidth: 700,
      confirmLoading: false,
      //   rules: {
      //     a_bitrate: [
      //         { required: true, message: "请输入活动名称", trigger: "blur" },
      //       { min: 4800, max: 320000, trigger: "blur" },
      //     ],
      //   },
    };
  },
  created() {
    // console.log(this.props);
  },
  mounted() {
    // console.log(this.props);
  },
  computed: {},
  methods: {
  // selectOrderId(e) {
	// 	console.log(e)
  //   const item = this.forms.a_encode.groupValue.find(item1=>item1.name == this.forms.a_encode.defaultValue)
  //   console.log(item);
  //   this.forms.a_encode.defaultValue = item.range;
	// },
    //窗口最大化切换
    toggleScreen() {
      if (this.modaltoggleFlag) {
        this.modalWidth = window.innerWidth;
      } else {
        this.modalWidth = 800;
      }
      this.modaltoggleFlag = !this.modaltoggleFlag;
    },
    show(record) {
      console.log(this.form);
      // 调用此方法,根据屏幕宽度自适应调整抽屉的宽度
      this.resetScreenSize();
      this.form.resetFields();

      try {
        this.ptzProtocolList = record.ptzProtocolGroup.split(";");
        //绑定数据
      } catch (e) {
        //TODO handle the exception
        console.log("获取云台协议组失败！");
      }
      this.model = Object.assign({}, record);
      this.visible = true;
				this.$nextTick(() => {
					this.form.setFieldsValue({
						devName:record.devName,
						devCode:record.devCode,
						relationDeviceIndex:record.relationDeviceIndex,
						name:record.name,
						cameraDesc:record.cameraDesc,
						location:record.location,
						used:record.used,
						// streamAddr:record.streamAddr,
						// hasPtz:record.hasPtz,
						// ptzAddr:record.ptzAddr,
						// ptzPort:record.ptzPort,
						ptzProtocol:record.ptzProtocol
					})
				})
      // this.$nextTick(() => {
      //   this.form.setFieldsValue(
      //     pick(
      //       this.model,
      //       "devName",
      //       "devCode",
      //       "relationDeviceIndex",
      //       "name",
      //       "cameraDesc",
      //       "location",
      //       "used",
      //       "ptzProtocol"
      //     )
      //   );
      // });
    },
    close() {
      this.$emit("close");
      this.visible = false;
      this.disableSubmit = false;
    },
    handleSubmit() {
      //编辑设备
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true;
          let formData = Object.assign(this.model, values);
          console.log(formData);
          postAction("/dev/camera/edit", formData)
            .then((res) => {
              if (res.code == "00000") {
                //子类绑定父类引组件的方法
                that.$emit("ok");
                that.$message.success("操作成功");
              } else {
                that.$message.warning("操作失败" + res.msg);
              }
            })
            .finally(() => {
              that.confirmLoading = false;
              that.close();
            });
        }
      });
    },
    // onMindchange(e) {
    // console.log(e)
    //   if (this.forms.a_encode.groupValue === 0) {
    // 	console.log(this.forms.a_encode.groupValue);
    //     this.forms.a_bitrate.min = 48000;
    //     this.forms.a_bitrate.max = 320000;
    //   }
    // },
    //  编辑参数设备
    handleSubmits() {
      // console.log(record,1111)
      // console.log(this.props);
      const that = this;
          let arr = []
          this.forms.a_encode.groupValue.forEach((item) => {
            if(this.forms.a_encode.defaultValue === item.range){
              console.log(222)
              console.log(item.key,9999)
              arr.push(item.key)
            }
            // console.log(this.forms.a_encode.defaultValue,2222);
            // console.log(item.range,333);
            // console.log(item.name)
            // console.log(item,111)
          })
          this.forms.profile.groupValue.forEach((item) => {
            console.log(item.name,'766666');
              if(item.name == this.forms.profile.defaultValue.name){
                // arrs.push(item.key)
                this.forms.profile.defaultValue.key = item.key
                  console.log(item.key,'99999')
                  console.log(this.forms.profile.defaultValue.key,'000000')
              }
                  
            })
             this.forms.rc_mode.groupValue.forEach((item) => {
            console.log(item.name,'766666');
              if(item.name == this.forms.rc_mode.defaultValue.name){
                // arrs.push(item.key)
                this.forms.rc_mode.defaultValue.key = item.key
                  console.log(item.key,'99999')
                  console.log(this.forms.rc_mode.defaultValue.key,'000000')
              }
                  
            })
          const formData = {
            // this.cameraId = record.cameraId,
            id: this.cameraId,
            // package_format: this.forms.package_format,
            v_encode: this.forms.v_encode.defaultValue.key,
            v_bitrate: Number(this.forms.v_bitrate),
            v_framerate: Number(this.forms.v_framerate),
            v_width: Number(this.forms.v_width),
            v_height: Number(this.forms.v_height),
            a_encode: Number(arr.toString('')),
            a_bitrate: Number(this.forms.a_bitrate),
            a_samplerate: Number(this.forms.a_samplerate),
            profile: this.forms.profile.defaultValue.key,
            rc_mode: this.forms.rc_mode.defaultValue.key,
          };
          console.log(this.item);
          console.log(this.forms.a_encode);
          console.log(formData.a_encode);
          console.log(formData);
          //   debugger
          cameraTbdEdit(formData).then((res) => {
            if (res.code == "00000") {
              that.$emit("ok");
              if(this.forms.v_framerate > 60 || this.forms.v_framerate < 5) {
                // alert('输入超出范围')
                this.$message.warning("操作失败,视频帧率超出范围!");
              } 
              // else if (this.forms.v_bitrate > 320000 || this.forms.v_bitrate < 32){
              //   this.$message.warning("操作失败,视频码率超出范围!");
              // }
               else{
                this.$message.success("操作成功");
                this.close();
              }
            }
          })
      
    },
    handleCancel() {
      this.close();
    },
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth;
      if (screenWidth < 500) {
        this.drawerWidth = screenWidth;
      } else {
        this.drawerWidth = 700;
      }
    },
  },
};
</script>

<style scoped>
.avatar-uploader > .ant-upload {
  width: 104px;
  height: 104px;
}
.ant-upload-select-picture-card i {
  font-size: 49px;
  color: #999;
}
.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
.ant-table-tbody .ant-table-row td {
  padding-top: 10px;
  padding-bottom: 10px;
}
.drawer-bootom-button {
  /* position: absolute; */
  bottom: -8px;
  width: 100%;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  left: 0;
  background: #fff;
  border-radius: 0 0 2px 2px;
}
</style>
